<!--
 * @Des: 表单查询
 * @Author: jin_yc
 * @Date: 2019-11-08 10:21:45
 * @LastEditor: jin_yc
 * @LastEditTime: 2021-12-14 11:02:04
 -->
<template>
  <div class="my-task-container">
    <fks-query-page
      v-loading="loading"
      :page-sizes="[15, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :current-page.sync="page"
      :page-size.sync="size"
      :data="tableData"
      highlight-current-row
      :total="total"
      :table-name="LANG.MY_TASK"
      @query="getData"
      @clear="clear"
      @sort-change="sortHandler"
    >
      <template slot="search">
        <fks-search-item :label="LANG.TASK_SUBJECT">
          <fks-input
            v-model="taskSubject"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <fks-search-item :label="LANG.FORM_NAME">
          <fks-input
            v-model="formName"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <!-- <fks-search-item :label="LANG.CREATOR">
          <fks-input v-model="creator" @keyup.enter.native="getData"></fks-input>
        </fks-search-item>-->
        <fks-search-item :label="LANG.ASSIGNEE">
          <fks-input
            v-model="asignee"
            @keyup.enter.native="getData"
          />
        </fks-search-item>
        <fks-search-item
          :span="24"
          :label="LANG.CREATE_TIME"
        >
          <fks-time-span-pick
            value-format="yyyy-MM-dd"
            :start-time.sync="startDate"
            :end-time.sync="endDate"
          />
        </fks-search-item>
      </template>
      <template>
        <fks-table-column
          type="index"
          align="center"
          label="#"
          width="60"
        />
        <fks-table-column
          is-link
          prop="formName"
          :label="LANG.FORM_NAME"
          header-align="center"
          align="left"
          min-width="180"
        >
          <template slot-scope="scope">
            <span @click="view(scope.row)">{{ scope.row.formName }}</span>
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskSubject"
          :label="LANG.TASK_SUBJECT"
          header-align="center"
          align="left"
          min-width="120"
        />
        <fks-table-column
          min-width="80"
          prop="taskState"
          :label="LANG.FORM_STATE"
          align="center"
        >
          <template slot-scope="scope">
            <fks-tag v-if="scope.row.taskState == 0">
              {{
                LANG.FORM_UNFINISHED
              }}
            </fks-tag>
            <fks-tag
              v-if="scope.row.taskState == 1"
              type="success"
            >
              {{
                LANG.FORM_FINISHED
              }}
            </fks-tag>
            <fks-tag
              v-if="scope.row.taskState == 2"
              type="danger"
            >
              {{
                LANG.ABANDON
              }}
            </fks-tag>
            <fks-tag
              v-if="scope.row.taskState == 3"
              type="warning"
            >
              {{
                LANG.SAVEDRAFT
              }}
            </fks-tag>
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskCreatorName"
          min-width="80"
          :label="LANG.CREATOR"
          align="center"
        />
        <fks-table-column
          prop="createDate"
          min-width="160"
          :label="LANG.CREATE_TIME"
          sortable
          align="center"
        >
          <template slot-scope="scope">
            {{
              scope.row.createDate
                ? $dayjs(scope.row.createDate).format('YYYY-MM-DD HH:mm')
                : ''
            }}
          </template>
        </fks-table-column>
        <fks-table-column
          prop="taskAsigneeName"
          min-width="80"
          :label="LANG.ASSIGNEE"
          align="center"
        />
        <!-- <fks-table-column prop="dictSort" label="备注" align="center"></fks-table-column> -->
        <!-- <fks-table-column
          prop="finishDate"
          width="170"
          :label="LANG.FINISHED_TIME"
          sort
          align="center"
        ></fks-table-column>-->
        <fks-table-column
          :label="LANG.OPERATION"
          align="center"
        >
          <template slot-scope="scope">
            <fks-button
              class="table-column-opt-button"
              type="text"
              @click="delegateHanlder(scope.row)"
            >
              {{ LANG.DELEGATE }}
            </fks-button>
            <fks-button
              class="table-column-opt-button"
              type="text"
              @click="urgeHandler(scope.row)"
            >
              {{ LANG.URGE }}
            </fks-button>
          </template>
        </fks-table-column>
      </template>
    </fks-query-page>
    <fks-dialog
      :visible.sync="urgeDialogVisible"
      title="催办"
      width="480px"
      @close="cancelUrge"
      @open="openUrgeDialog"
    >
      <fks-form
        ref="urgeForm"
        :model="urgeForm"
        label-width="85px"
      >
        <fks-form-item
          :label="LANG.CC_NOTIFYMETHODS"
          required
          prop="notify"
        >
          <fks-checkbox-group
            v-model="notifyMethods"
            @change="handleNotifyMethodsChange"
          >
            <fks-checkbox
              v-for="item in notifyMethodOptions"
              :key="item.value"
              :label="item.value"
            >
              {{ item.label }}
            </fks-checkbox>
          </fks-checkbox-group>
        </fks-form-item>
      </fks-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <fks-button @click="cancelUrge">取 消</fks-button>
        <fks-button
          type="primary"
          @click="confirmUrgeMethods"
        >确 定</fks-button>
      </span>
    </fks-dialog>
    <delegate
      :task-info="selectTask"
      :visible.sync="delegateVisible"
    />
    <router-view />
  </div>
</template>

<script>
import delegate from '@/modules/FormCenter/components/Delegate'
import { getCreateTask, taskUrge } from './api'
export default {
  name: 'MyTask',
  components: {
    delegate
  },
  data() {
    return {
      loading: false,
      asignee: '',
      taskName: '',
      formName: '',
      creator: '',
      taskSubject: '',
      startDate: '',
      endDate: '',
      searchBarH: '58',
      page: 1,
      size: 15,
      total: 0,
      sortOrder: '',
      sortColumn: '',
      tableData: [],
      urgeDialogVisible: false,
      delegateVisible: false,
      selectTask: {
        taskId: ''
      },
      urgeForm: {
        notify: ''
      },
      urgeListTaskId: '',
      notifyMethods: [],
      notifyMethodOptions: [
        {
          label: '站内信',
          value: '0'
        },
        {
          label: '短信',
          value: '1'
        },
        {
          label: '邮件',
          value: '2'
        }
      ]
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getCreateTask({
        asignee: this.asignee,
        creator: this.creator,
        formName: this.formName,
        startDate: this.startDate ? this.startDate + ' 00:00:00' : '',
        endDate: this.endDate ? this.endDate + ' 23:59:59' : '',
        taskSubject: this.taskSubject,
        page: this.page,
        order: this.sortOrder,
        column: this.sortColumn,
        size: this.size
      }).then((res) => {
        if (res.status) {
          this.tableData = res.data.list
          this.total = res.data.total
        }
        this.loading = false
      })
    },
    handleNotifyMethodsChange(val) {
      if (val && val.length && val.length > 0) {
        this.$set(this.urgeForm, 'notify', val.join())
      } else {
        this.$set(this.urgeForm, 'notify', '')
      }
    },
    confirmUrgeMethods() {
      this.$refs.urgeForm.validate((valid) => {
        if (valid) {
          taskUrge(this.urgeListTaskId, this.urgeForm.notify).then((res) => {
            let msg = this.LANG.FAILED
            if (res.status) {
              msg = this.LANG.SUCCESS
              this.urgeDialogVisible = false
            }
            this.$message({
              type: 'success',
              message: msg
            })
          })
        }
      })
    },
    cancelUrge() {
      this.urgeDialogVisible = false
      this.notifyMethods = []
      this.urgeForm.notify = ''
    },
    openUrgeDialog() {
      this.urgeForm.notify = ''
    },
    /**
     * @description: 获取搜索栏的高度来调整页面
     * @param {height} 搜索栏高度
     */
    searchBarHeight(height) {
      this.searchBarH = height
    },
    /**
     * @description: 关闭弹窗
     */
    close() {
      this.dialogVisible = false
    },
    /**
     * @description: 编辑
     * @param {row} 被编辑行数据
     */
    clear() {
      this.taskSubject = ''
      this.formName = ''
      this.asignee = ''
      this.startDate = ''
      this.endDate = ''
    },
    view(data) {
      //data.ext1 == '1'表示为自由流程
      if (data.formBizId && data.formKey && data.ext1 === '1') {
        this.$router.push({
          path:
            this.$route.path +
            '/customForm/view/' +
            data.formKey +
            '/' +
            data.formBizId,
          query: {
            taskName: data.taskName,
            processInstanceId: data.processInstanceId
          }
        })
      } //data.ext1 !== '1'表示为普通流程
      else if (data.formBizId && data.formKey && data.ext1 !== '1') {
        this.$router.push(
          this.$route.path +
            `/form/view/${data.formKey}/${data.formBizId}?processInstanceId=${data.processInstanceId}`
        )
      } else {
        this.$message.warning('参数缺失！')
      }
    },
    /**
     * @description: 委托
     * @param {row} 当前行
     */
    delegateHanlder(row) {
      if (row.taskId) {
        this.selectTask = row
        this.delegateVisible = true
      } else {
        this.$message.warning('参数缺失！')
      }
    },
    /**
     * @description: 催办
     * @param {选中行的数据}
     */
    urgeHandler(row) {
      // this.$confirm(this.LANG.URGE_NOTICE, this.LANG.TIPS, {
      //   type: 'warning'
      // }).then(() => {
      this.urgeListTaskId = row.taskId
      this.urgeDialogVisible = true

      // })
    },
    /**
     * @description: 排序
     */
    sortHandler(data) {
      this.sortOrder = data.order
        ? data.order == 'ascending'
          ? 'asc'
          : 'desc'
        : null
      this.sortColumn = data.prop
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
.my-task-container {
  position: relative;
  height: 100%;
  overflow: auto;

  .search-bar {
    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 1px;
      background: #eee;
    }
  }
}

.btns {
  margin-bottom: 20px;
}
</style>
